<template>
  <div class="form-signin" style="margin-top: 40px;">
    <h1 class="h3 mb-3 font-weight-normal text-center">登 录</h1>
    <label for="inputEmail" class="sr-only">用户名</label>
    <input type="email"  v-model="user.userName" class="form-control" placeholder="用户名" required autofocus>
    <label for="inputPassword" class="sr-only">密码</label>
    <input type="password" v-model="user.password" class="form-control" placeholder="密码" required>

    <button class="btn btn-lg btn-primary btn-block btn-tdsuccess text-white" style="border-radius: 0;" @click="login()">登 录</button>
  </div>
</template>

<script>
import axios from 'axios'
import Cookies from 'js-cookie'

export default {
  name: "login",
  title: "登录",
  props: {
    activityId: {}
  },
  data () {
    return {
      user: {
        userName: '',
        password: ''
      }
    }
  },
  mounted () {
    this.autoLogin()
  },
  methods: {
    login () {
      axios.post('/mscs/user/login', this.$paramsConvert(this.user)).then(res => {
        if (res.data.code === 1) {
          Cookies.set('user', this.user, { expires: 7})
          this.$store.dispatch('setUser', res.data.data)
          this.$router.replace({name: 'eventform', params: {activityId: this.activityId}})
        } else {
          this.$codeError(res)
        }
      }).catch(error => {
        this.$message({
          // duration: 0,
          showClose: true,
          message: `错误信息：${error}`,
          type: 'error'
        })
      })
    },
    autoLogin () {
      let userStr = Cookies.get('user')
      if (userStr) {
        this.user = JSON.parse(userStr)
        // this.login()
      }
    }
  }
}
</script>
<style>
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
</style>
